<template>
    <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.name"
        placeholder="搜索模板标题"
        style="width: 220px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
        <el-select
        v-model="listQuery.temp_type"
        style="width: 150px"
        class="filter-item"
        filterable
        @change="handleFilter"
      >
        <el-option key label="全部类型" value="" />
        <el-option key="1" label="弹框模板" value="1" />
        <el-option key="2" label="背景图" value="2" />
      </el-select>
      <el-select
        v-model="listQuery.status"
        style="width: 150px"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option key label="全部状态" :value="''" />
        <el-option key="2" label="已停用" value="0" />
        <el-option key="1" label="已启用" value="1" />
      </el-select>
      <el-button
       plain size="small"
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
       plain size="small"
        v-waves
        class="filter-item btn"
        type="primary"
        icon="el-icon-refresh"
        @click="handleCancel"
      >重置</el-button>

      <el-button
       plain size="small"
        v-waves
        class="filter-item btn"
        type="success"
        icon="el-icon-plus"
        @click="handleAdd()"
      >添加模板</el-button>

      <el-button
       plain size="small"
        v-waves
        class="filter-item btn"
        type="success"
        icon="el-icon-plus"
        @click="handleAdd(1)"
      >添加背景图</el-button>

    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
    <el-table-column label="模板id" min-width="100" align="center" >
        <template slot-scope="{row}">
          <span>{{ row.template_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="模板名称" min-width="100" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="弹框图片" min-width="100" align="center">
        <template slot-scope="{row}">
          <el-image 
            style="width: 50px;"
            :src="row.completePopImg" 
            :preview-src-list="[row.completePopImg]">
        </el-image>
        </template>
      </el-table-column>

      <el-table-column label="背景图片" min-width="100" align="center">
        <template slot-scope="{row}">

          <div>
            <el-image
                v-if="row.completeBgImg" 
                style="width: 50px;"
                :src="row.completeBgImg" 
                :preview-src-list="[row.completeBgImg]">
            </el-image>
          </div>
          
        </template>
      </el-table-column>

      <!-- <el-table-column label="按钮文案" align="center">
        <template slot-scope="{row}">
          <span>{{ row.btnStyle.buttonName }}</span>
        </template>
      </el-table-column>   -->
      <el-table-column label="类型" align="center">
        <template slot-scope="{row}">
          <span>{{ row.temp_type == '1'? "弹框模板": "背景模板" }}</span>
        </template>
      </el-table-column> 
      <el-table-column label="显示广告" min-width="100" align="center">
        <template slot-scope="{row}">
          <el-switch
            v-model="row.opacity"
            active-text="展示"
            inactive-text="透明"
            :active-value="1"
            :inactive-value="0"
            @change="changeStatus(row,'opacity')"
          />
        </template>
      </el-table-column>    
      <el-table-column label="状态" min-width="100" align="center">
        <template slot-scope="{row}">
          <el-switch
            active-text="开启"
            inactive-text="关闭"
            v-model="row.status"
            :active-value="'1'"
            :inactive-value="'0'"
            @change="changeStatus(row,'status')"
          />
        </template>
      </el-table-column>

      <el-table-column label="展示次数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.show_num }}</span>
        </template>
      </el-table-column> 

      <el-table-column label="点击次数" align="center">
        <template slot-scope="{row}">
          <span>{{ row.click_num }}</span>
        </template>
      </el-table-column> 
      <el-table-column label="点击率" align="center">
        <template slot-scope="{row}">
          <span>{{ (row.click_num / row.show_num * 100).toFixed(2) }} %</span>
        </template>
      </el-table-column> 


      <el-table-column
        label="操作"
        align="center"
        min-width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{row}">
          <el-button type="primary" plain size="small" @click="handleUpdate(row)">编辑</el-button>
          <!-- <el-button type="danger" plain size="small" @click="handleDel(row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      class="pageShow"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
<!-- 弹窗 -->
 <!-- 添加模板 -->
    <el-dialog
      title="模板"
      :visible.sync="updated"
      :width="dialogWidth"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="120px"
        enctype="multipart/form-data"
      >
      <el-row>
        <el-col :span="12">
          <el-form-item label="模板id" prop="template_id">
            <el-input
            :disabled="dialogStatus == 'update'"
              v-model.trim="temp.template_id"
              placeholder="不能与其他模板id重复,且不可修改"
            />
          </el-form-item>
          <el-form-item label="模板名称" prop="name">
            <el-input
              v-model.trim="temp.name"
              placeholder="模板名称"
            />
          </el-form-item>

          <el-form-item label="图片宽度" prop="imgWidth">
            <el-input v-model.number="temp.imgWidth" placeholder="图片宽度" />
          </el-form-item>
          <el-form-item label="图片高度" prop="imgHeight">
            <el-input v-model.number="temp.imgHeight" placeholder="图片高度" />
          </el-form-item>
          <el-form-item label="模板是否可见" prop="opacity">
            <el-switch
            active-text="展示"
            inactive-text="透明"
            v-model="temp.opacity"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>

        <el-form-item label="黑色的遮罩层" prop="mask">
            <el-switch
            active-text="展示"
            inactive-text="不展示"
            v-model="temp.mask"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>

        <el-form-item label="是否弹系统toast" prop="new_field.toast">
            <el-switch
            active-text="是"
            inactive-text="否"
            v-model="temp.new_field.toast"
            :active-value="true"
            :inactive-value="false"
          />
        </el-form-item>

        <el-form-item label="toast时机" prop="new_field.toastType">
            <!-- <el-switch
            active-text="展现模板"
            inactive-text="点击模板"
            v-model="temp.new_field.toastType"
            :active-value="1"
            :inactive-value="0"
          /> -->
          <el-radio-group v-model="temp.new_field.toastType">
            <el-radio :label="1">点击模板</el-radio>
            <el-radio :label="0">展现模板</el-radio>
                
          </el-radio-group>
        </el-form-item>

        <el-form-item label="系统toast文案">
          <el-input v-model.trim="temp.new_field.toastText" placeholder="系统toast文案" />
        </el-form-item>

        <!-- <el-form-item label="模板类型" prop="temp_type">
            <el-radio-group v-model="temp.temp_type">
                <el-radio label="1">弹框模板</el-radio>
                <el-radio label="2">背景模板</el-radio>
            </el-radio-group>
        </el-form-item> -->

        <el-form-item label="是否显示底部菜单栏">
             <el-switch
              active-text="是"
              inactive-text="否"
              v-model="temp.new_field.showBtmMenu"
            />
        </el-form-item>

        <h2>底部配置</h2>
        <el-form-item label="是否开启">
             <el-switch
              active-text="是"
              inactive-text="否"
              v-model="temp.new_field.otherPopup.open"
            />
        </el-form-item>
        <el-form-item label="图片位置" prop="new_field.otherPopup.weizhi">

          <el-radio-group v-model="temp.new_field.otherPopup.weizhi">
            <el-radio :label="'top'">top</el-radio>
            <el-radio :label="'bottom'">bottom</el-radio>
                
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片" prop="new_field.otherPopup.img">
            <el-upload
                name="img"
                class="avatar-uploader"
                action="http://kyy.jianyue668.com/api/upload/img"
                :show-file-list="false"
                :on-success="handleAvatarSuccess1"
                :before-upload="beforeAvatarUpload">
                <img v-if="temp.new_field.otherPopup.img" :src="temp.new_field.otherPopup.img" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-link type="primary"  style="margin-left:20px" @click="chiosBgImg(2)">选择弹框</el-link>
        </el-form-item>

        <el-form-item label="宽度" prop="new_field.otherPopup.w">
          <el-input v-model.number="temp.new_field.otherPopup.w" placeholder="宽度" />
        </el-form-item>
        <el-form-item label="高度" prop="new_field.otherPopup.h">
          <el-input v-model.number="temp.new_field.otherPopup.h" placeholder="高度" />
        </el-form-item>
        <el-form-item label="出现时间" prop="new_field.otherPopup.time">
          <el-input v-model.number="temp.new_field.otherPopup.time" placeholder="出现时间" >
            <template slot="append">ms</template>
          </el-input>
        </el-form-item>

<!-- 
        
        <h1>按钮样式</h1>

        <el-form-item label="按钮文案">
          <el-input v-model.trim="temp.btnStyle.buttonName" placeholder="按钮文案" />
        </el-form-item>

        <el-form-item label="按钮位置" prop="btnStyle.buttonPosition">
          <el-input v-model.number="temp.btnStyle.buttonPosition" placeholder="按钮位置" />
        </el-form-item>
        <el-form-item label="按钮外边距" prop="btnStyle.buttonMargin">
          <el-input v-model.number="temp.btnStyle.buttonMargin" placeholder="按钮外边距" />
        </el-form-item>
        <el-form-item label="按钮背景颜色" prop="btnStyle.buttonBackgroundColor">
      
          <el-color-picker v-model="temp.btnStyle.buttonBackgroundColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="按钮字体颜色" prop="btnStyle.buttonFontColor">
    
          <el-color-picker v-model="temp.btnStyle.buttonFontColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="按钮字体大小" prop="btnStyle.buttonFontSize">
          <el-input v-model.number="temp.btnStyle.buttonFontSize" placeholder="按钮字体大小" />
        </el-form-item>
        <el-form-item label="按钮宽度" prop="btnStyle.buttonWidth">
          <el-input v-model.number="temp.btnStyle.buttonWidth" placeholder="按钮宽度" />
        </el-form-item>
        <el-form-item label="按钮高度" prop="btnStyle.buttonHeight">
          <el-input v-model.number="temp.btnStyle.buttonHeight" placeholder="按钮高度" />
        </el-form-item> -->

        <el-form-item label="状态" prop="status">
            <el-radio-group v-model="temp.status">
                <el-radio label="1">开启</el-radio>
                <el-radio label="0">关闭</el-radio>
            </el-radio-group>
        </el-form-item>

        <div style="text-align: right">
          <el-button plain size="small" @click="updated = false">取消</el-button>
          <el-button
           plain size="small"
            type="primary"
            :loading='addloading'
            @click="dialogStatus==='create'?handadd():handupdate()"
          >确定</el-button>
        </div>


        </el-col>
        <el-col :span="12">
          <el-form-item label="弹框图片" prop="popImg">
                <el-upload
                    name="img"
                    class="avatar-uploader"
                    action="http://kyy.jianyue668.com/api/upload/img"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-link type="primary"  style="margin-left:20px" @click="chiosBgImg(1)">选择弹框</el-link>
            </el-form-item>

            <el-form-item label="背景图片">
              <!-- <el-input v-model.number="temp.imgHeight" placeholder="图片高度" /> -->
                <el-image 
                    v-show="bgImageUrl"
                    style="width: 150px;"
                    :src="bgImageUrl" 
                    :preview-src-list="[bgImageUrl]">
                </el-image>
                <el-link type="primary"  style="margin-left:20px" @click="chiosBgImg(0)">选择背景图</el-link>
            </el-form-item>

        </el-col>
      </el-row>
        
      </el-form>
    </el-dialog>
    <!-- 添加背景图 -->
    <el-dialog
        title="背景图"
      :visible.sync="template"
      :width="'600px'"
    >
    <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="120px"
        enctype="multipart/form-data"
      >
        <el-form-item label="背景id" prop="template_id">
            <el-input
            :disabled="dialogStatus == 'update'"
              v-model.trim="temp.template_id"
              placeholder="不能与其他模板id重复,且不可修改"
            />
          </el-form-item>
          <el-form-item label="背景名称" prop="name">
            <el-input
              v-model.trim="temp.name"
              placeholder="模板名称"
            />
          </el-form-item>

          <el-form-item label="背景图片" prop="popImg">
              <el-upload
                  name="img"
                  class="avatar-uploader"
                  action="http://kyy.jianyue668.com/api/upload/img"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
          </el-form-item>

        <div style="text-align: right">
          <el-button plain size="small" @click="template = false">取消</el-button>
          <el-button
           plain size="small"
            type="primary"
            :loading='addloading'
            @click="dialogStatus==='create'?handadd():handupdate()"
          >确定</el-button>
        </div>
    
    </el-form>

    </el-dialog>
    <!-- 背景板选择 -->
    <el-dialog
        title="选择背景模板"
      :visible.sync="bgImgVisible"
      :width="'880px'"
    >
        <div>
            <el-image 
                v-for="(v, k) in bgImgList" 
                :key="k"
                style="width: 200px; margin-right: 10px;"
                :class="temp.bgImg == v.popImg ? 'order_1': 'order_2'"
                :src="v.completePopImg"
                fit="fill"
                @click="clicktemplate(v)"
                >
            </el-image>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAdvTemplate, createAdvTemplate, updateAdvTemplate, delAdvTemplate} from "@/api/adv_admin/config.js"
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { Message, MessageBox } from "element-ui";
export default {
    'name': 'LandingPage',
    components: { Pagination },
    directives: { waves },
    data() {
        return { 
            def_template :{
                id: "",
                name: "",
                bgId: "",
                bgImg: "",
                popImg: "", // 弹窗图
                imgWidth: 750,
                imgHeight: 750,
                opacity: 1, // 0 不可看 1 可看
                mask: 1, // 展示遮罩层 1 展示，0 不展示
                temp_type: '1',
                // btnStyle:{
                //     buttonName: '',
                //     buttonPosition: 0,
                //     buttonMargin: 47,
                //     buttonBackgroundColor: "#EE1A13",
                //     buttonFontColor: "#FFFFFF",
                //     buttonFontSize: "36",
                //     buttonWidth: 376,
                //     buttonHeight: 95
                // },
                new_field:{ // 新加的字段在这个里面
                  toast: false, // 是否系统toast
                  toastType: 1,  //toast时机1 点击模版 0：展现模版
                  toastText: '', // 系统toast文案
                  showBtmMenu: true, // 是否显示底部菜单栏
                  otherPopup: { // 底部配置
                      open: false,
                      weizhi: 'bottom', //  图片位置
                      img: '',
                      w: 750, // 宽
                      h: 356,  // 高
                      time: 600 // 出现时间
                  }
                },
                status: '1'
            },
            imageUrl: '',
            bgImageUrl:'',
            popImageUrl: '',
            tableKey: 0,
            listLoading: false,
            addloading: false,
            dialogWidth: '0px',
            list: [],
            total: 0,
            listQuery: {
                page: 1,
                limit: 20,
                temp_type: "1",
                name: "",
                status: "1",
            },
            rules: {
                template_id: [
                    { required: true, message: "必填", trigger: "blur" }
                ],
                name: [
                    { required: true, message: "必填", trigger: "blur" }
                ],
                popImg: [
                    { required: true, message: "必选", trigger: "blur" }
                ],
                pkg: [
                    { required: true, message: "必选", trigger: "blur" }
                ],
                imgWidth: [
                    { required: true, message: "必选", trigger: "blur" }
                ],
                imgHeight: [
                    { required: true, message: "必选", trigger: "blur" }
                ],
                opacity: [
                    { required: true, message: "必选", trigger: "blur" }
                ],
                mask: [
                    { required: true, message: "必选", trigger: "blur" }
                ],
                temp_type: [
                    { required: true, message: "必选", trigger: "blur" }
                ],
                btnStyle:{
                    buttonName: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    buttonPosition: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    buttonMargin: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    buttonBackgroundColor: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    buttonFontColor: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    buttonFontSize: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    buttonWidth: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    buttonHeight: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                },
                new_field:{
                    toast: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    toastType: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    toastText: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    otherPopup: { // 底部配置
                        weizhi:[
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                        img: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                        w: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                        h: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                        time: [
                        { required: true, message: "必选", trigger: "blur" }
                    ],
                    }
                    
                }
            },
            updated: false,
            update: '',
            dialogStatus: '',
            temp: {},
            bgImgVisible: false,
            bgImgList: [],
            template: false,
            upload_type: ''
        }
    },
    created(){
      this.temp = JSON.parse(JSON.stringify(this.def_template))
      
    },
    mounted(){
        
        this.getList()
        this.setDialogWidth()
    },
    methods: {
        setDialogWidth() {
            const val = document.body.clientWidth;
            const def = 1000; // 默认宽度
            if (val < def) {
                this.dialogWidth = "100%";
            } else {
                this.dialogWidth = def + "px";
            }
        },
        getList(){
            this.listLoading = true
            getAdvTemplate(this.listQuery).then(res => {
                if (res.STATUS == 200){
                    this.list = res.DATA.list
                    this.total = res.DATA.total
                }
                this.listLoading = false
            })
        },
        getT(){
          getAdvTemplate({'page': 1, 'limit': 1000,'temp_type': 2, 'status': '1'}).then(res => {
                if (res.STATUS == 200){
                    this.bgImgList = res.DATA.list
                }
            })
        },
        getP(){
          getAdvTemplate({'page': 1, 'limit': 1000, 'temp_type': 1, 'status': '1'}).then(res => {
                if (res.STATUS == 200){
                    // this.bgImgList = res.DATA.list
                    this.bgImgList = res.DATA.list.filter((obj, index, self) =>
                      index === self.findIndex((t) => t.popImg === obj.popImg)
                    )
                  
                }
            })
        },
        handleFilter() {
            this.listQuery.page = 1;
            this.getList();
        },
        handleCancel() {
            this.listQuery.page = 1;
            this.listQuery.name = "";
            this.listQuery.status = "";
            this.listQuery.temp_type = "1";
            this.getList();
        },
        handleUpdate(row){
          this.temp = row
          this.imageUrl = row.completePopImg
          this.bgImageUrl = row.completeBgImg
          this.dialogStatus = 'update'

          if (row.temp_type == '2'){
            this.template = true
          }else{
            this.updated = true
          }
           
            
        },
        handleAdd(type){
          this.temp = JSON.parse(JSON.stringify(this.def_template))
          this.imageUrl = ''
          this.bgImageUrl = ""
          this.dialogStatus = 'create'
          if (type){
            // 背景图修改
            this.template = true
            this.temp.temp_type = '2'
          }else{
            this.updated = true
            
          }
            
        },
        handadd(){
            this.addloading = true
            this.$refs['dataForm'].validate((valid) => {
            if (valid) {
                let data = JSON.parse(JSON.stringify(this.temp)) 
                // data.btnStyle = JSON.stringify(data.btnStyle)
                data.new_field = JSON.stringify(data.new_field)
                createAdvTemplate(data).then(res => {
                    if (res.STATUS == 200){
                        Message.success('添加成功')
                        this.updated = false
                        this.template = false
                        this.getList()
                        this.imageUrl = ''
                    }else{
                        
                        Message({
                            message: res.DEC,
                            type: "error",
                            duration: 2000,
                        });
                        // Message.error()
                    }
                    this.addloading = false
                })

            } else {
                console.log('error submit!!');
                this.addloading = false
            }
            });
            // console.log(this.temp)
            
        },
        beforeAvatarUpload(file) {
        },
        handleAvatarSuccess(res, file){
            this.temp.popImg = res.DATA
            // this.imageUrl = 'http://apichannel.jianyue668.com' + res.DATA
            this.imageUrl = 'http://static.jianyue668.com' + res.DATA
            // console.log(res,file)
        },
        handleAvatarSuccess1(res, file){
          // 底部配置图片上传成功的回调
            this.temp.new_field.otherPopup.img = 'http://static.jianyue668.com' + res.DATA
        },
        handupdate(){
            this.addloading = true
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    let data = JSON.parse(JSON.stringify(this.temp)) 
                    // data.btnStyle = JSON.stringify(data.btnStyle)
                    data.new_field = JSON.stringify(data.new_field)
                    updateAdvTemplate(data).then(res => {
                        if (res.STATUS == 200){
                            Message.success('修改成功')
                            this.updated = false
                            this.template = false
                            this.getList()
                            this.imageUrl = ''
                        }else{
                            
                            Message({
                                message: res.DEC,
                                type: "error",
                                duration: 2000,
                            });
                            // Message.error()
                        }
                        this.addloading = false
                        
                    })
                } else {
                    this.addloading = false
                }
            });
            
            

        },
        handleDel(item){
            MessageBox.confirm("确定删除吗", "确认", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                delAdvTemplate({ template_id: item.template_id }).then((r) => {
                    if (r.STATUS == 200) {
                        Message({
                            message: "删除成功",
                            type: "success",
                            duration: 2000,
                        });
                        this.getList();
                    }
                });
            }).catch(() => {});
            
        },
        changeStatus(item){
            let data = JSON.parse(JSON.stringify(item)) 
            // data.btnStyle = JSON.stringify(data.btnStyle)
            data.new_field = JSON.stringify(data.new_field)
            updateAdvTemplate(data).then(res => {
                if (res.STATUS == 200){
                    Message.success('修改成功')
                    this.updated = false
                    
                }else{
                    
                    Message({
                        message: res.DEC,
                        type: "error",
                        duration: 2000,
                    });
                    this.getList()
                }
            })
        },
        chiosBgImg(type){
          this.img_type = type
          if (type){
            this.getP()
          }else{
            this.getT()
          }
          
          this.bgImgVisible = true
          
        },
        clicktemplate(item){
          // 判断选择图片是弹框的还是背景图
          if (this.img_type == 1){
            // 弹框图
            this.temp.popImg = item.popImg
            this.imageUrl = item.completePopImg
          }else if(this.img_type == 2){
            // 底部配置图
            this.temp.new_field.otherPopup.img = item.completePopImg
            // this.imageUrl = item.completePopImg
          }else{
            // 背景图
            this.temp.bgImg = item.popImg
            this.bgImageUrl = item.completePopImg
          }
            
            // console.log(this.temp, item.popImg)
            this.bgImgVisible = false
        },
    }
}
</script>
<style>
.show-pwd {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
  user-select: none;
}
.push {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  margin-left: 5px;
}
.pageHidden {
  display: none;
}
.btn {
  margin-left: 0;
}
.fullwidth {
  width: 450px;
  margin-left: 50px;
}
@media (max-width: 550px) {
  .pageShow {
    display: none;
  }
  .pageHidden {
    display: block;
  }
  .fullwidth {
    width: 100%;
    margin-left: 0;
  }
}

.order_1{
  padding: 2px;
  border-radius: 4px;
  border: 2px solid #409EFF;
}
.order_2{
    padding: 2px;
  border-radius: 4px;
  border: 2px solid #7e7d7d;
}
.el-image{
  border: 1px dashed #d9d9d9;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
    
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 80px;
    color: #8c939d;
    max-width: 330px;
    /* height: 180px; */
    /* line-height: 178px; */
    text-align: center;
  }
  .avatar {
    max-width: 330px;
    /* height: 178px; */
    display: block;
  }
  
</style>